<!-- 购买量与下载量图表 -->
<template>
    <div class="bar-chart-container">
        <h2 class="chart-title">{{ title }}</h2>
        <span v-if="!data.length" class="no-data-tip">暂无数据</span>
        <v-chart v-else class="bar-chart" :option="barChartOption" autoresize />
    </div>
</template>

<script>
import { ref, onMounted, reactive, watch } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([
    CanvasRenderer,
    BarChart,
    TooltipComponent,
    LegendComponent,
    GridComponent
]);

export default {
    name: 'BarChartComponent',
    components: {
        VChart
    },
    props: {
        title: {
            type: String,
            default: '横向双数据柱状图'
        },
        data: {
            type: Array,
            default: () => []
        }
    },
    setup(props) {
        const barChartOption = reactive({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                textStyle: {
                    color: '#94a3b8'
                },
                bottom: 10, // 设置图例距离容器底部的距离为10px
                left: 'center', // 设置图例水平居中
                orient: 'horizontal' // 设置图例为水平排列
            },
            grid: {
                top: '0%',
                bottom: '3%',
                left: '5%',
                right: '10%',
                containLabel: true,
                bottom: '10%', // 调整grid底部距离，给图例留出空间
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    color: '#94a3b8'
                }
            },
            yAxis: {
                type: 'category',
                data: props.data.map(item => item.name),
                axisLabel: {
                    color: '#94a3b8'
                }
            },
            series: [
                {
                    name: '下载量',
                    type: 'bar',
                    data: props.data.map(item => item.value1),
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff',
                    }
                },
                {
                    name: '购买量',
                    type: 'bar',
                    data: props.data.map(item => item.value2),
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff',
                    }
                }
            ]
        });

        onMounted(() => {
            // 监听数据变化，更新图表 
            watch(() => props.data, (newData) => {
                barChartOption.yAxis.data = newData.map(item => item.name);
                barChartOption.series[0].data = newData.map(item => item.value1);
                barChartOption.series[1].data = newData.map(item => item.value2);
            }, { deep: true });
        });

        return {
            barChartOption
        };
    }
};
</script>

<style scoped>
.bar-chart-container {
    background-color: #1e293b;
}

.chart-title {
    color: #3b82f6;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 600;
}

.bar-chart {
    height: 300px;
}

.no-data-tip {
    color: white;
    font-size: 18px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>